import { useEffect, useMemo, useState } from 'react';
import { ConfigProvider, theme as antdTheme, MappingAlgorithm, App as AntdApp } from 'antd';
import { useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { HappyProvider } from '@ant-design/happy-work-theme';
import { BrowserRouter, useRoutes } from 'react-router-dom';
import zh_CN from 'antd/lib/locale/zh_CN';
import en_US from 'antd/lib/locale/en_US';
import ErrorBoundary from 'src/components/ErrorBroundary';
import { RootState } from 'src/store';
import { routeConfig } from 'src/router';
import { prefixCls, PageModeStyleFilter } from 'src/constants';
import RouterGuard from 'src/router/RouterGuard';
import { LanguageEnum } from 'src/locales';
import { useThemeDark } from 'src/hooks/theme';
import { ScreenProvider } from 'src/context/ScreenContext';
import { getScreenSizeType } from 'src/utils/screen';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/en-au';
// dayjs.locale('zh-cn');
const { VITE_BASE_PATH: basename } = import.meta.env;

function Routes() {
  const dynamicRoute = useSelector((state: RootState) => state.permission.dynamicRoute);
  const routes = useRoutes([...(dynamicRoute ?? []), ...routeConfig]);
  return routes;
}

function App() {
  const { theme, menu } = useSelector((state: RootState) => state.theme.pageTheme);
  const compack = useSelector((state: RootState) => state.theme.compack);
  const { dark } = useThemeDark();
  const { i18n } = useTranslation();
  const [lang, setLang] = useState<string>(i18n.language);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    document.body.style.filter = PageModeStyleFilter[menu.pageMode];
  }, [menu.pageMode]);

  // 设置主题算法
  const algorithmConf = useMemo(() => {
    const algorithm = [] as MappingAlgorithm[];
    algorithm.push(dark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm);
    compack && algorithm.push(antdTheme.compactAlgorithm);
    return algorithm.length > 1 ? algorithm : algorithm[0];
  }, [dark, compack]);

  // 设置语言
  const locale = useMemo(() => {
    return lang === LanguageEnum.CN ? zh_CN : en_US;
  }, [lang]);

  const applyScreenSize = () => {
    setWindowWidth(window.innerWidth);
  };

  useEffect(() => {
    setLang(i18n.language);
    dayjs.locale(i18n.language === LanguageEnum.CN ? 'zh-cn' : 'en-au');
  }, [i18n.language]);

  useEffect(() => {
    window.addEventListener('resize', applyScreenSize);
    return () => {
      window.removeEventListener('resize', applyScreenSize);
    };
  }, []);

  return (
    <BrowserRouter basename={basename}>
      <ScreenProvider value={{ type: getScreenSizeType(windowWidth), size: windowWidth }}>
        <ConfigProvider
          theme={{
            algorithm: algorithmConf,
            token: theme,
          }}
          prefixCls={prefixCls}
          locale={locale}>
          <HappyProvider disabled={!menu.happyMode}>
            <AntdApp message={{ maxCount: 1 }} notification={{ top: 80 }}>
              <ErrorBoundary>
                <RouterGuard>
                  <Routes />
                </RouterGuard>
              </ErrorBoundary>
            </AntdApp>
          </HappyProvider>
        </ConfigProvider>
      </ScreenProvider>
    </BrowserRouter>
  );
}

export default App;
